<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>支付</title>
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/richScan.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1, user-scalable=no">
  <style>
    .box_con{margin-left:0.53rem;}
    .box_right{margin-top:0.31rem; color: #666666;font-size: 0.26rem;}
/* .box_right>p{margin-left:0.49rem;color:#020202;} */
.box_right>p:first-child{font-size:0.3rem;color: black;width:140px}
/*     .box_right>p:nth-child(3){margin-top:0.85rem;} */
/*     .box_right>p:nth-child(4){margin-bottom:0.3rem;} */
/*     .box_right>p:nth-child(3) , .box_right>p:nth-child(4){color:#666666;font-size:0.26rem;} */
/*     .box_right>p:nth-child(3)>i{color:#666666;font-size:0.26rem;} */
/*     .box_right>p:nth-child(3)>b{color:#666666;font-size:0.2rem;} */
/*     .box_right>p:nth-child(4)>i{color:#F30977;font-size:0.26rem;} */
/*     .box_right>p:nth-child(4)>b{color:#F30977;font-size:0.2rem;} */
/*     .box_right>p:nth-child(4)>span{color:#666666;font-size:0.26rem;} */
/*     .box_right>p:nth-child(4)>span>i{color:#666666;font-size:0.26rem;} */
  </style>
  <script src="js/jquery.js"></script><script src="js/jquery.cookie.js"></script>
<script src="js/base.js?v=base.js?v=20180102"></script>
<script src="js/jsrender.js"></script>
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
<script type="text/javascript"
	src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

<script type="text/javascript">
    var link = location.href;
    $.ajax({
    	　　url: window.baseUrl + "/api/wx/createJsapiSignature",//后台给你提供的接口
    	　　type: "Post",
    	　　data: link,
    	　　async: false,
    	　　contentType: "application/json; charset=utf-8",
    	　　dataType: "json",
    	　　success: function (data) {
			    wx.config({
// 			        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			        appId: data.appId, // 必填，公众号的唯一标识
			        timestamp: data.timestamp, // 必填，生成签名的时间戳
			        nonceStr: data.nonceStr, // 必填，生成签名的随机串
			        signature: data.signature,// 必填，签名，见附录1
			        jsApiList: [
			        	 'checkJsApi',
			             'chooseWXPay'
			        	] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
			    });
			    
    	}
    	});
    
    </script>
</head>
<body>
<!-- <div class="header-box"> -->
<!--   <p>支付</p> -->
<!-- </div> -->
	<div class="back_title">
		<div class="back_title_box">
			<span id="spanTip" style="margin: 15px;float: left;">
			<!-- <img src="img/scanRead/tishi@2x.png"> 每满1元减0.05元</span> -->
		</div>
	</div>
<div class="back_list">
  <div class="back_list_box" >
    <ul id="back_list_box">

    </ul>
  </div>
</div>
<div class="footer_kb"></div>
<div class="footer_kb1"></div>
<div class="pay">
  <div class="pay_box" id="pay_box">
    <a href="javascript:;">
      合计金额： <span>
      ￥<i id="totalPrice">0.00</i>元</span> 
      <span style="margin-left:0.2rem;">
      <!-- (已优惠<b id="payYouhui"></b>元) -->
      </span>
      
    </a>
<!--     <a href="readSuccess.html?successid=0" id="to_pay"> -->
    <a href="#" id="to_pay">
      支付
    </a>
  </div>
</div>
</body>


<script id="book_show_tmpl" type="text/x-jsrender">
{{if #data.book != null}}
<li id="{{:id}}">
<div class="box_con">
	 <div class="divImg"><img src="{{:#data.book.bookImage1}}"></div>
	<div class="box_right" style="margin-left: 10px;" >
		<p>{{:#data.book.bookName}}</p>
		<p>作者：{{:#data.book.author}}</p>
		<p>主题：<i>{{:#data.book.classificationName}}</i></p>
		<p>适龄：{{:#data.book.readMinAge}} - {{:#data.book.readMaxAge}}岁</p>

		<div class="xingxing1">
			 {{if #data.book.evaluationStar<1}}
            <img src="img/index/xing6@2x.png">
			{{/if}}
			{{if #data.book.evaluationStar>0 && #data.book.evaluationStar<2}}
            <img src="img/index/xing5@2x.png">
			{{/if}}
			{{if #data.book.evaluationStar>=2 && #data.book.evaluationStar<3}}
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
			{{/if}}
			{{if #data.book.evaluationStar>=3 && #data.book.evaluationStar<4}}
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
			{{/if}}
			{{if #data.book.evaluationStar>=4 && #data.book.evaluationStar<5}}
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
			{{/if}}
			{{if #data.book.evaluationStar>=5}}
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
            <img src="img/index/xing5@2x.png">
			{{/if}}

            <!-- <span>{{:#data.book.evaluationStar}}</span> -->
		</div>
	</div>
</div>
<div class="box_con_bott">
	<div class="bott_left">
		<span>费用：</span> <span>￥<i class="price">{{:#data.book.borrowPrice}}</i>元/周</span>
	</div>
	<div class="bott_right">
		<span>周数：{{:borrowWeeks}}</span> 
	</div>
</div>
</li>
{{/if}}
</script>


<script>

// 购物车id集合
var ids = getQueryString("ids");
var ip = returnCitySN["cip"];
 
var ispay = false;
$("#to_pay").click(function(){
	if(ispay) return;
	ispay = true;
	pay();
});

getCart();

function getCart(){
	if(ids==""){
		alert("请先选择要借阅的绘本！");
		window.location.href = "scanRead.html";
		return;
	}
	
 //获取当前用户下面的购物车
$.get({
	url : window.baseUrl + "/api/book/bookCart/findPage",
	data : {
		ids : ids,
		"pageNum" : 1,
		"pageSize" : 10
	},
	success : function(data) {
		var data = data.data.list;
		$("#back_list_box").empty();
		var htmlOutput = $.templates("#book_show_tmpl").render(data);
		$("#back_list_box").html(htmlOutput);
		
		var totalPrice = 0;
		$.each(data, function(key, val) {
			var book = val.book;
			totalPrice += val.borrowWeeks * book.borrowPrice;
		});
		
		// 优惠价格，满1元减0.05
		/* var youhui = (parseInt(totalPrice)*0.05);
		totalPrice -= youhui;
		$("#payYouhui").text(youhui.toFixed(2)); */
// 		$(".price").each(function(i,itme){
// 			totalPrice += parseFloat($(this).text());
// 		});
		$("#totalPrice").text(totalPrice.toFixed(2));
	}
});

}

function pay(){ 
	getUserId();
	// 先添加订单，然后再跳到支付页面，小鱼币暂时不做

	$.ajax({
		url : window.baseUrl + "/pay/createOrder",
		datatype : 'json',
		type : "POST",
		data : JSON.stringify({
			openid : window.openid,
			productId : ids,
			spbillCreateIp :ip
		}),
		scriptCharset: 'utf-8',
		contentType: "application/json; charset=UTF-8",
		success : function(data) { 
			if(data == null){
				alert("支付失败，请重新借阅！");
				window.location.href = "/scanRead.html";
			}else{
			  pay2(data);
			}
	  }
	});
	
}  	
	

function pay2(d) {
		var appId = d.appId;
		var timeStamp = d.timeStamp;
		var nonceStr = d.nonceStr;
		var signType = d.signType;
		var pk = d.packageValue;
		var paySign = d.paySign;
		if (typeof WeixinJSBridge == "undefined") {
			if (document.addEventListener) {
				document.addEventListener('WeixinJSBridgeReady', onBridgeReady,
						false);
			} else if (document.attachEvent) {
				document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
				document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
			}
		} else {
			onBridgeReady();
		}
		function onBridgeReady() {
			WeixinJSBridge
					.invoke(
							'getBrandWCPayRequest',
							{
								"appId" : appId,// 公众号名称，由商户传入
								"timeStamp" : timeStamp, // 时间戳，自1970年以来的秒数
								"nonceStr" : nonceStr, // 随机串
								"package" : pk,
								"signType" : signType, // 微信签名方式："MD5"
								"paySign" : paySign
							// 微信签名
							},
							function(res) {
								if (res.err_msg == "get_brand_wcpay_request:ok") {
									success();
								}
								// 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
								else {
									//alert(JSON.stringify({res}));
									window.location.href = "payError.html";
// 									window.location.href = "${pageContext.request.contextPath}/mobile/user/payfail/"
								}
							});
		}
	}
	function success() {
		
		// 跳到支付成功页面
		window.location.href = "readSuccess.html?successid=0";
//		jQuery
//				.ajax({
//					url : "${pageContext.request.contextPath}/mobile/user/paysuccess/",
//					datatype : 'json',
//					type : "Post",
//					scriptCharset : 'utf-8',
//					contentType : "application/x-www-form-urlencoded; charset=utf-8",
//					success : function(data) {
//						window.location.href = "${pageContext.request.contextPath}/mobile/user/success2"
//					}
//				})
	}	
	
</script>
</html>